import { Menu, type MenuProps } from 'antd';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

import {
  useFlattenedRoutes,
  usePathname,
  usePermissionRoutes,
  useRouteToMenuFn,
} from '@/router/hooks';
import { menuFilter } from '@/router/utils';

import { NAV_HORIZONTAL_HEIGHT, BASE } from '../config';
import { useWorkBasePermissionRoutes } from '@/router/hooks/use-permission-routes';

import { useKnowFlattenedRoutes } from '@/router/hooks/use-flattened-routes';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '@/components/icon';
import { useInitializeData } from '@/store/configStore';

export default function NavHorizontal() {
  const navigate = useNavigate();
  const pathname = usePathname();
  const { t } = useTranslation();

  const routeToMenuFn = useRouteToMenuFn();
  const permissionRoutes = useWorkBasePermissionRoutes();
  const flattenedRoutes = useKnowFlattenedRoutes();
  const initializeData = useInitializeData();

  console.log(permissionRoutes);

  const menuList = useMemo(() => {
    const menuRoutes = menuFilter(permissionRoutes);
    return routeToMenuFn(menuRoutes);
  }, [routeToMenuFn, permissionRoutes]);
  // console.log('horizontal menuList: ', menuList, menuList.length, NAV_HORIZONTAL_HEIGHT);

  const selectedKeys = useMemo(() => [pathname], [pathname]);

  const onClick = (key: string) => {
    const nextLink = flattenedRoutes?.find((el) => el.key === key);
    const url = BASE + key;
    console.log(url);

    // Handle special case for external links in menu items
    // For external links: skip internal routing, avoid adding new tab in current project,
    // prevent selecting current route, and open link in new browser tab
    if (nextLink?.hideTab && nextLink?.frameSrc) {
      window.open(nextLink?.frameSrc, '_blank');
      return;
    }
    navigate(url);
  };

  return (
    <div className="flex h-full w-full justify-around bg-white p-2">
      {/* <Menu
        mode="horizontal"
        items={menuList}
        defaultOpenKeys={[]}
        selectedKeys={selectedKeys}
        onClick={onClick}
        className="!border-none"
        // style={{ background: themeVars.colors.background.default }}
      /> */}
      {permissionRoutes
        // .filter((item) => !item.meta?.hideMenu && initializeData?.license_edition)
        .map((item) => {
          const { meta, children } = item;
          if (meta) {
            const { key, label, icon, disabled, suffix } = meta;
            const color = selectedKeys.includes(BASE + key) ? '#3370ff' : 'black';
            return (
              <div
                onClick={() => {
                  onClick(key);
                }}
                key={key}
                className="flex flex-col items-center"
              >
                <div>
                  {<SvgIcon color={color} icon={icon} size={24} className="ant-menu-item-icon" />}
                </div>
                <div style={{ color: color }} className="mt-1 text-xs">
                  {t(label)}
                </div>
              </div>
            );
          }
        })}
    </div>
  );
}
